<template>
    <!-- 盒须图 -->
    <div class="width100 height100" :id="scatterId">

    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: 'scatter',
    emits: [],
    components: {},
    props: {
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {},
        ws:{}
    },
    watch: {
        change() {
            this.$nextTick(() => {
                setTimeout(this.chartResize,20)
            })
        }
    },
    data() {
        return {
            time: null,
            // 散点图id
            scatterId: null,
            // 雷达图对象
            scatterChart: null,

        }
    },
    created() {
        // 散点图id
        this.scatterId = this.$uuid();
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(this.initChart,100)
        })
    },
    methods: {
        // 适配图像
        chartResize() {
            if (!this.scatterChart) {
                this.initChart()
            } else {
                this.scatterChart.resize()
            }
        },
        // 初始化图形dom
        initChart() {
            const dom = document.getElementById(this.scatterId)
            this.scatterChart = echarts.init(dom);
            let xAxis2 = ['13', '6.51', '6.51', '6.51', '5.49', '6.55', '6.985', '7.533', '8.05', '9.01', '9.478', '10.96', '14.96', '18.051', '21.065', '21.065', '22.565', '22.565', '22.565', '22.565', '22.565', '21.065', '21.065', '18.128', '13'];
            
            this.scatterChart.setOption({
                title: {
                    text: '北京时间(小时),频率(MHz)',
                    bottom: '0',
                    left: '10',
                    textStyle: {
                        // fontSize: this.showClass ? '0.6rem' : '12px',
                        fontSize: '12px',
                        fontFamily: 'Microsoft YaHei, Microsoft YaHei',
                        color: '#575D73'
                    }
                },
                dataset: [
                    {
                        // prettier-ignore
                        source: [
                            [],
                            [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
                            [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
                            [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
                            [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
                            [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
                        ]
                    },
                    {
                        transform: {
                            type: 'boxplot',
                            config: { itemNameFormatter: ' {value}' }
                        }
                    },
                    {
                        fromDatasetIndex: 1,
                        fromTransformResult: 1
                    }
                ],
                tooltip: {
                    show: true,
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    containLabel: false,
                    show: true,
                    backgroundColor: '#161627',
                    left: '40',
                    bottom: '70',
                    right: '10',
                    top: '10'
                },
                xAxis: [
                    {
                        type: 'category',
                        // boundaryGap: false,
                    }, {
                        type: 'category',
                        position: 'bottom',
                        // boundaryGap: false,
                        axisLine: { onZero: false, show: false },
                        axisTick: { show: false, alignWithLabel: true },
                        splitLine: { show: false },
                        axisLabel: {
                            interval: 0, rotate: 45, margin: 25,
                            formatter: function (value, index) {
                                return `{yearStyle|${value}}`
                            },
                            rich: {
                                yearStyle: {
                                    // 让年度信息更醒目
                                    color: '#575D73',
                                    fontFamily: 'Microsoft YaHei, Microsoft YaHei',
                                    fontWeight: '700',
                                    // fontSize: this.showClass ? '0.6rem' : '12px',
                                },
                            }
                        },
                        textStyle: {
                            fontSize: this.showClass ? '0.6rem' : '12px',
                            fontFamily: 'Microsoft YaHei, Microsoft YaHei',
                            color: '#575D73'
                        },
                        data: xAxis2
                    }
                ],
                yAxis: {
                    type: 'value',
                    splitLine: { show: false },
                    splitArea: { show: false }
                },
                series: [
                    {
                        name: 'boxplot',
                        type: 'boxplot',
                        boxWidth: ['10%', '10%'],
                        itemStyle: { borderColor: "#AA9B5F", color: '#036EB7'},
                        datasetIndex: 1,
                    },
                    {

                        name: 'outlier',
                        type: 'scatter',
                        // symbol: 'none',
                        itemStyle: {color:'#036EB7'},
                        datasetIndex: 2
                    }
                ]
            });
        },
    }
}
</script>

<style lang="scss" scoped></style>